<template>
  <!-- 支付页面 -->
  <div class="pay">
    <van-cell-group>
      <!-- 顶部课程信息区域 -->
      <van-cell class="course-info">
        <!-- 图片 -->
        <img :src="courseData.courseImgUrl">
        <!-- 课程价格信息 -->
        <div class="price-info">
          <!-- 课程名 -->
          <div class="course-name" v-text="courseData.previewFirstField"></div>
          <!-- 购买价格 -->
          <div class="discounts">￥{{ courseData.discounts }}</div>
        </div>
      </van-cell>

      <!-- 购买信息区域 -->
      <van-cell class="account-info">
        <div>购买信息</div>
        <div>购买课程后使用此账号登录【拉勾教育】学习课程</div>
        <div class="username">当前账号：{{ phone }}</div>
      </van-cell>

      <!-- 支付区域 -->
      <van-cell class="pay-channel">
        <div>
          <p class="title">支付方式</p>
          <!-- 单选框组件 -->
          <van-radio-group v-model="radio">
            <van-cell-group>
              <!-- 微信支付 -->
              <van-cell @click="radio = '1'">
                <!-- van-cell的标题插槽 -->
                <template #title>
                  <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png" alt="">
                  <span>微信支付</span>
                </template>
                <!-- van-cell 的插槽 -->
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>

              <!-- 支付宝支付 -->
              <van-cell @click="radio = '2'">
                <!-- van-cell的标题插槽 -->
                <template #title>
                  <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png" alt="">
                  <span>支付宝支付</span>
                </template>
                <!-- van-cell 的插槽 -->
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>

        <!-- 支付按钮 -->
        <van-button @click="handlePay">￥{{ courseData.discounts }} 立即支付</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
// 1、getCourseById：获取课程详情接口
import { getCourseById } from '@/services/course'
// 1、saveOrder：创建商品订单接口
// 2、initPayment：创建订单(发起支付)接口
// 3、getPayResult：查询订单(支付结果)接口
import { createOrder, initPayment, getPayResult } from '@/services/pay'

// 导入 vant 组件
import { CellGroup, Cell, RadioGroup, Radio, Button } from 'vant'

export default {
  name: 'Pay',
  components: {
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanButton: Button
  },
  props: {
    // 获取 url 地址中的课程 ID
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      courseData: {}, // 课程信息
      radio: '1', // 支付方式，1 是微信师傅；2 是支付宝支付
      orderNo: null, // 商品订单号
      payOrderNo: null // 支付订单号
    }
  },
  computed: {
    phone () {
      return this.$store.state.user.organization.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  },
  created () {
    // 调用发送课程详情函数
    this.loadCourse()
    // 调用获取订单号的函数
    this.loadOrder()
  },
  methods: {
    // 发送获取课程详情请求
    async loadCourse () {
      const { data } = await getCourseById({
        courseId: this.courseId
      })

      // 如果请求成功
      if (data.state === 1) {
        this.courseData = data.content
      }
    },
    // 发送获取订单号请求
    async loadOrder () {
      // 1、创建订单，获取订单号
      // 发起请求
      const { data } = await createOrder({
        goodsId: this.courseId
      })
      // 如果请求成功
      if (data.state === 1) {
        this.orderNo = data.content.orderNo // 获取订单号
      }
    },
    // 支付按钮触发的事件
    async handlePay () {
      // 发起请求
      const { data } = await initPayment({
        goodsOrderNo: this.orderNo, // 商品订单编号
        channel: this.radio === '1' ? 'weChat' : 'aliPay', // 支付渠道(weChat-微信支付，aliPay-支付宝支付)
        returnUrl: 'http://edufront.lagounews.com/' //  h5 支付成功回调地址
      })
      console.log(data)
      // 如果请求成功
      if (data.state === 1) {
        // 获取支付订单号
        this.payOrderNo = data.content.orderNo
        // 接收响应地址并进行跳转
        window.location.href = data.content.payUrl
      }

      // 对支付结果进行轮询操作，来查询是否支付成功
      // 定时器
      const timer = setInterval(async () => {
        // 发起查询支付结果请求
        const { data: payResult } = await getPayResult({
          orderNo: this.payOrderNo // 支付订单号
        })

        // 如果支付成功
        if (payResult.content && payResult.content.status === 2) {
          // 清除定时器
          clearInterval(timer)
          // 提示框
          this.$toast.success('购买成功！')
          // 路由跳转
          this.$router.push({
            name: 'Learn'
          })
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
// 全局样式
.pay {
  position: absolute;
  width: 100%;
  height: 100%;

  // van-cell-group 组件样式
  .van-cell-group {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  // 课程信息样式
  .course-info {
    height: 170px;
    padding: 40px 20px 0;
    margin-bottom: 10px;

    // 内部的 van-cell 组件样式
    .van-cell__value {
      display: flex;

      img {
        width: 80px;
        height: 107px;
        border-radius: 6px;
      }

      // 课程价格信息样式
      .price-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        height: 107px;
        padding: 5px 20px;

        // 课程名样式
        .course-name {
          font-size: 16px;
        }

        // 价格样式
        .discounts {
          font-size: 22px;
          font-weight: 700;
          color: #ff7452;
        }
      }
    }
  }

  // 购买信息样式
  .account-info {
    height: 120px;
    margin-bottom: 10px;

    div {
      // 第 2 个 div 的样式
      &:nth-child(2) {
        font-size: 12px;
        color: #999;
      }
    }

    // 账户信息样式
    .username {
      margin: 20px 0 10px;
      font-size: 16px;
    }
  }

  // 支付区域（占满剩余空间）
  .pay-channel {
    flex: 1;

    // 让 radio 与 按钮在上下两端
    .van-cell__value {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .van-cell {
      padding: 20px 10px;

      img {
        width: 28px;
        height: 28px;
      }

      span {
        font-size: 16px;
        margin-left: 10px;
      }
    }

    // 左侧标题插槽
    .van-cell__title {
      display: flex;
      align-items: center;
    }

    // 右侧 radio 选中颜色
    ::v-deep .van-radio__icon--checked {
      .van-icon {
        background-color: #fbc546;
        border-color: #fbc546;
      }
    }

    // 底部按钮样式
    .van-button {
      background: linear-gradient(270deg, #faa83e, #fbc546);
      border-radius: 20px;
      margin-bottom: 5px;
      font-size: 18px;
    }
  }
}
</style>
